<template>
	<view>
		<u-popup :show="selfShow" 
			@close="onPopupClose"
			:overlay="true"
			:closeOnClickOverlay="true"
			:safeAreaInsetBottom="true"
			mode="bottom" 
			round="40">
			<view class="popupContainer">
				<view class="wrapper camera" @click="selectFromCameraAlbum('camera')">
					<image class="icon" src="@/pages/shop/static/image/article_frame_icon_photo.png" mode=""></image>
					拍照上传
				</view>
				<view class="line">

				</view>
				<view class="wrapper album" @click="selectFromCameraAlbum('album')">
					<image class="icon" src="@/pages/shop/static/image/article_frame_icon_atlas.png" mode=""></image>
					相册上传
				</view>
				<view class="line">

				</view>
				<view class="wrapper cancel" @click="onPopupClose">
					取消
				</view>
			</view>
		</u-popup>
		<kps-image-cutter @ok="onSave" @cancel="onCancle" :url="srcImgUrl" :fixed="true" :width="cutWidth"
			:height="cutHeight"></kps-image-cutter>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	const Config = require("@/config.js")
	const api = require("@/static/js/api.js")
	const utils = require("@/static/js/utils.js")
	import kpsImageCutter from "@/pages/shop/components/ksp-image-cutter/ksp-image-cutter.vue";
	let that = null
	export default {
		components: {
			kpsImageCutter
		},
		data() {
			return {
				selfShow: false,
				srcImgUrl:"",
			};
		},
		computed: {
		    ...mapState({
		        hasLogin: state => state.userInfo.hasLogin,
		        isAuthUserInfo: state => state.userInfo.isAuthUserInfo,
		        isAuthPhone: state => state.userInfo.isAuthPhone,
		        isSeller: state => state.userInfo.isSeller,
		        avatarUrl: state => state.userInfo.avatarUrl,
		        nickName: state => state.userInfo.nickName,
		        telephone: state => state.userInfo.telephone,
		        buyerId: state => state.userInfo.buyerObj.id,
		    }),
		},
		
		props: {
			value: {
				type: Boolean,
				default:false
			},
			cutWidth: {
				type: Number,
				default: uni.upx2px(680)
			},
			cutHeight: {
				type: Number,
				default: uni.upx2px(540)
			},
		},
		watch: {
		    value: {
		        handler: function observer(val) {
		            var that = this;
		            console.log("popupCard")
		            that.selfShow = val
		        },
		        immediate: true
		    }
		},
		methods: {
			//=====封面编辑
			onPopupOpen() {
				this.selfShow = true;
			},
			
			onPopupClose() {
				this.$emit('close');
				this.$emit('input', false)
			},
			
			selectFromCameraAlbum(type) {
				let that = this
				this.$emit('close');
				this.$emit('input', false)
				uni.chooseImage({
					count: 1,
					sourceType: [type],
					success: (res) => {
						var path = res.tempFilePaths[0];
						that.srcImgUrl = res.tempFilePaths[0];
					}
				})
			},

			onSave(ev) {
				let that = this
				utils.uploadImage(ev.path, that.buyerId, (path)=>{
					that.$emit("onSuccess", path)
				})	
				this.srcImgUrl = "";
			},
			
			

			onCancle() {
				// url设置为空，隐藏控件
				this.srcImgUrl = "";
			},
		}

	}
</script>

<style>
	page {
		background-color: #f3f3f3;
	}
</style>

<style lang="scss">
	.popupContainer {
		.wrapper {
			font-size: 32rpx;
			height: 122rpx;
			width: 750rpx;
			line-height: 122rpx;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;

			.icon {
				width: 44rpx;
				height: 44rpx;
				margin-right: 20rpx;
			}
		}

		.album {
			color: #121212;
		}

		.camera {
			color: #121212;
		}

		.cancel {
			color: #666666;
		}

		.line {
			width: 750rpx;
			height: 1px;
			background-color: #e3e3e3;
		}
	}
</style>